<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="searchObj.type" clearable placeholder="请选择">
          <el-option label="学员登录数统计" value="login_num"></el-option>
          <el-option label="学员注册数统计" value="register_num"></el-option>
          <el-option label="课程播放数统计" value="video_view_num"></el-option>
          <el-option label="每日课程数统计" value="course_num"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="searchObj.begin" value-format="yyyy-MM-dd" placeholder="请选择开始时间"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="searchObj.end" value-format="yyyy-MM-dd" placeholder="请选择结束时间"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="this.getData" icon="el-icon-search">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="chart-container">
      <div ref="chartRef" class="chart" style="height:500px;width:100%" />
    </div>
  </div>
</template>

<script>
import { getShowData } from '@/api/statistics'
import echarts from 'echarts'
export default {
  data() {
    return {
      searchObj: {
        type: '',
        begin: '',
        end: ''
      },
      xData: null,
      yData: null
    }
  },
  methods: {
    async getData() {
      const res = await getShowData(this.searchObj)

      if (res.code === 20000) {
        this.xData = res.data.dates
        this.yData = res.data.nums

        this.initEcharts()
      }
    },
    initEcharts() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.chartRef)

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '数据统计'
        },
        tooltip: {
          trigger: 'axis'
        },
        dataZoom: [
          {
            show: true,
            height: 30,
            xAxisIndex: [0],
            bottom: 30,
            start: 10,
            end: 80,
            handleIcon:
              'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: '#d3dee5'
            },
            textStyle: {
              color: '#fff'
            },
            borderColor: '#90979c'
          },
          {
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ],
        xAxis: {
          type: 'category',
          data: this.xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.yData,
            type: 'line'
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>
